<template>
  <div class="tc">
    <div class="userInforBox">
      <!-- <div class="flex a-c mb54">
        <p class="shuBorder" />
        <p class="userInforTitle">账号设置</p>
      </div> -->
      <div class="bindDialogTitle">
        <el-button type="primary" size="small" class="goback" @click="goBack">返回</el-button>
        <p class="tit">账号设置</p>
      </div>
      <div class="userInforItem flex">
        <p class="userInforItem-label">头像</p>
        <div class="userInforItem-right flex j-sb a-c">
          <el-image
            style="width: 64px; height: 64px;border-radius:50%;"
            :src="formData.headImg?formData.headImg:'https://img1.17img.cn//ui/bimg/SH100000/yxt4/houtai/home/avatar.png'"
            fit="cover"
          />
          <el-button type="text" @click="isLogo = true">去上传</el-button>
        </div>
      </div>
      <div class="userInforItem flex">
        <p class="userInforItem-label">备注名</p>
        <div class="userInforItem-right flex j-sb a-c">
          <p class="userInforItem-value">{{ formData.nickname }}</p>
          <el-button type="text" @click="isNickName = true">去修改</el-button>
        </div>
      </div>
      <div class="userInforItem flex">
        <p class="userInforItem-label">手机号</p>
        <div class="userInforItem-right flex j-sb a-c">
          <p class="userInforItem-value">{{ formData.mobile }}</p>
          <!-- <el-button type="text" @click="isPhone = true">去更换</el-button> -->
          <el-button type="text">
            <el-tooltip class="item" effect="dark" content="请咨询您的专属客服！" placement="top">
              <i class="el-icon-warning" />
    </el-tooltip>
            手机号用不了怎么办</el-button>
        </div>
      </div>
      <div class="userInforItem flex">
        <p class="userInforItem-label">邮箱</p>
        <div class="userInforItem-right flex j-sb a-c">
          <p class="userInforItem-value">{{ formData.email }} </p>
          <el-button type="text" @click="isEmail = true">去更换</el-button>
        </div>
      </div>
      <div class="userInforItem flex">
        <p class="userInforItem-label">密码</p>
        <div class="userInforItem-right flex j-sb a-c">
          <p class="userInforItem-value">*******</p>
          <div>
            <!-- <span v-if="inputType == 'password'" class="input-send" @click="inputType = 'text'"><svg-icon icon-class="open-eyes" style="color:#4F5862 ;" /></span>
            <span v-if="inputType == 'text'" class="input-send" @click="inputType = 'password'"><svg-icon icon-class="close-eyes" style="color:#4F5862 ;" /></span> -->
            <el-button type="text" class="ml8" @click="isPassword = true">去修改</el-button>
          </div>

        </div>
      </div>
      <!-- <div class="userInforItem flex">
        <p class="userInforItem-label">是否绑定掌上仪信通</p>
        <div class="userInforItem-right flex j-sb a-c">
          <p class="userInforItem-value">{{ formData.isActivation?"是":"否" }}</p>
          <el-button type="text">去绑定</el-button>
        </div>
      </div> -->
    </div>
    <!-- 展位LOGO -->
    <logo v-if="isLogo" :visible.sync="isLogo" :boothname="formData" @closeEvents="getChangeDialog" />
    <nickName v-if="isNickName" :visible.sync="isNickName" :boothname="formData" @closeEvents="getChangeDialog" />
    <editEmail v-if="isEmail" :visible.sync="isEmail" :boothname="formData" @closeEvents="getChangeDialog" />
    <editPhone v-if="isPhone" :visible.sync="isPhone" :boothname="formData" @closeEvents="getChangeDialog" />
    <editPassword v-if="isPassword" :visible.sync="isPassword" :boothname="formData" @closeEvents="getChangeDialog" />
  </div>
</template>
<script>
import api from '@/api'
import logo from '../componentsDialog/editLogo.vue'
import nickName from '../componentsDialog/editNickName.vue'
import editEmail from '../componentsDialog/editEmail.vue'
import editPhone from '../componentsDialog/editPhone.vue'
import editPassword from '../componentsDialog/editPassword.vue'
export default {
  components: { logo, nickName, editEmail, editPhone, editPassword },
  data() {
    return {
      inputType: 'password',
      formData: {

      },
      isLogo: false,
      isNickName: false,
      isEmail: false,
      isPhone: false,
      isPassword: false
    }
  },
  mounted() {
    this.getDdetail()
  },
  methods: {
    async getDdetail() {
      const searchParams ={
        imShowId:this.$store.getters.imShowId,
        imListId:this.$store.getters.imListId,
        pathurl:this.$store.getters.imShowId.substring(0,2).toLowerCase()=="tw"?'twBoss':'boss',
        userName:this.$store.getters.username,
        userId:this.$store.getters.useid,
        mobile:this.$store.getters.mobile
      }
      if (this.$store.getters.imShowId.substring(0,2).toLowerCase()=="tw") {
        let form={
          imListId:this.$store.getters.imListId,
          limit:10,
          page:1,
          text:this.$store.getters.mobile
        }
        const data = await api.specialist.queryAccountList(form)
        this.formData = data.data[0]
      }else{
        const data = await api.boss.getCompanyUserDetail(searchParams)
        this.formData = data.data
      }
      // this.$store.commit('user/SET_AVATAR', data.data.headImg)
    },
    goBack() {
      this.$router.back()
    },
    getChangeDialog(type) {
      if (type) {
        this.getDdetail()
      }
      this.isLogo = false
      this.isNickName = false
      this.isEmail = false
      this.isPhone = false
      this.isPassword = false
    }
  }
}
</script>
<style scoped>
.tc{
    text-align: center;
}
.userInforBox{
    width: 1200px;
    background:#fff;
    padding: 23px 32px 54px;
    margin: 16px auto;
    -moz-user-select: none; /* 火狐 */
    -webkit-user-select: none; /* webkit浏览器 */
    -ms-user-select: none; /* IE10 */
    -khtml-user-select: none; /* 早期浏览器 */
    user-select: none;
}
.shuBorder{
    width: 2px;
    background: #0C7FF2;
    height: 15px;
    margin-right: 5px;
}
.userInforTitle{
    font-size: 18px;
    font-weight: 600;
    color: #202933;
}
.mb54{
    margin-bottom: 54px;
}
.userInforItem{
    padding: 0 32px;
}
.userInforItem-right{
    width: 890px;
    height: 104px;
    border-bottom: 1px solid #E5EAF0;
}
.userInforItem-label{
    width: 160px;
    height: 104px;
    line-height: 104px;
    font-size: 14px;
    color: #7E8790;
    text-align: left;
}
.j-sb{
    justify-content: space-between;
}
.userInforItem-value{
    font-size: 14px;
    font-weight: 400;
    color: #202933;
}
.ml8{
    margin-left: 8px;
}
.userInforBtn{
    text-align: right;
    padding: 32px 32px 0 0;
}
.bindDialogTitle{
  position: relative;
  text-align: center;
  margin-bottom: 22px;
}
.bindDialogTitle .tit{
  font-size: 18px;
  font-weight: 500;
  color: #202933;
}
.goback{
  position: absolute;
  top: 0;
  left: 0;
}
</style>
